<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
 <title>用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
	href="${ctx }/resources/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${ctx }/resources/css/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/wu.css" />
<script type="text/javascript" src="${ctx }/resources/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="${ctx }/resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${ctx }/resources/easyui/locale/easyui-lang-zh_CN.js"></script>   
  

  </head>
  
  <body>
   <!-- 查询条件开始 -->
	<div class="easyui-panel" data-options="title:'查询条件',iconCls:'icon-search'" style="width:100%;">
		<form id="searchFrm" method="get">
			<table width="100%" cellpadding="10" >
				<tr>
					<td width="33%">
					<input class="easyui-textbox" name="identity"
							data-options="label:'身份证号:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%"> 
					<input class="easyui-textbox" name="loginname"
							data-options="label:'登陆名称:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%">
					<input class="easyui-textbox" name="realname"
							data-options="label:'真实姓名:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
				</tr>
				<tr>
					<td width="33%">
					<input class="easyui-textbox" name="address"
							data-options="label:'用户地址:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%">
					<input class="easyui-textbox" name="phone"
							data-options="label:'用户电话:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%">
					<input class="easyui-textbox" name="position"
							data-options="label:'用户职位:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearch()" data-options="iconCls:'icon-search'">查询</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#searchFrm').form('clear')" data-options="iconCls:'icon-reload'">重置</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 查询条件结束 -->
	 <div style="height: 2px"></div>
	 <!-- 数据表格开始 -->
    <table id="table" class="easyui-datagrid" style="width:100%;height:300px">
    </table>
	<div id="tb">
	<a href="javascript:void(0)" class="easyui-linkbutton" id="addUser" data-options="iconCls:'icon-add',plain:true">添加用户</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="updateUser" data-options="iconCls:'icon-edit',plain:true">修改用户</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="deleteUser" data-options="iconCls:'icon-remove',plain:true">删除用户</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="resetUserPwd" data-options="iconCls:'icon-reload',plain:true">重置密码</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="selectUserRole" data-options="iconCls:'icon-shape-square-select',plain:true">分配角色</a>
	</div>
	<!-- 数据表格结束  -->
	
	<!-- 添加和修改用户的弹出层 开始 -->
	<div id="dlg" class="easyui-dialog" style="width:500px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:10px">
            	<input type="hidden" name="userid">
                <input name="realname" id="realname" class="easyui-textbox" required="true" label="用户姓名:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="loginname" id="loginname" class="easyui-textbox" required="true" label="登陆名称:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="identity" class="easyui-textbox" required="true" label="身份证号:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="address" class="easyui-textbox" required="true" label="用户地址:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="phone" class="easyui-textbox" required="true"  label="用户电话:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="position" class="easyui-textbox" required="true"  label="用户职位:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
             	<label class="textbox-label" style="text-align: left;">
        				用户性别:
        			</label>
           			 <input class="easyui-radiobutton" name="sex" value="1">&nbsp;&nbsp;男&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="sex" value="0">&nbsp;&nbsp;女&nbsp;&nbsp;
            </div>
             <div style="margin-bottom:10px">
             	<label class="textbox-label" style="text-align: left;">
        				是否可用:
        			</label>
           			 <input class="easyui-radiobutton" name="available" value="1">&nbsp;&nbsp;可用&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="available" value="0">&nbsp;&nbsp;不可用&nbsp;&nbsp;
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
	
	<!-- 添加和修改用户的弹出层 结束-->
	
		<!-- 分配弹出层 开始 -->
	<div id="dlg-roles" class="easyui-dialog" style="width:500px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-roles-buttons'">
        <table id="roletable" class="easyui-datagrid" style="width:100%;height:300px">
    	</table>
    </div>
    <div id="dlg-roles-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUserRole()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg-roles').dialog('close')" style="width:90px">取消</a>
    </div>
	
	<!-- 分配角色的弹出层 结束-->

	<script type="text/javascript">
	//加载表格数据
	$("#table").datagrid({
		title:'用户列表',
		singleSelect:true,
		collapsible:true,
        fitColumns:true,
        pagination:true,
        rownumbers:true,
        toolbar:'#tb',
        url:'${ctx}/user/loadAllUser.action',
        columns:[[
                  {field:'userid',title:'编号',align:'center',width:100},
                  {field:'identity',title:'身份证号',align:'center',width:100},
                  {field:'loginname',title:'登陆名称',align:'center',width:100},
                  {field:'realname',title:'真实名称',align:'center',width:100},
                  {field:'address',title:'用户地址',align:'center',width:100},
                  {field:'sex',title:'用户性别',align:'center',width:100,formatter:function(value){
                	  if(value==1){
                 		 return "<font color=red>男</font>"; 
                 	  }else{
                 		  return "<font color=green>女</font>"; 
                 	  }
                  }},
                  {field:'phone',title:'用户电话',align:'center',width:100},
                  {field:'pwd',title:'用户密码',align:'center',width:100},
                  {field:'position',title:'用户职位',align:'center',width:100},
                  {field:'available',title:'是否可用',align:'center',width:100,formatter:function(value){
                	  if(value==0){
                 		 return "<font color=red>不可用</font>"; 
                 	  }else{
                 		  return "<font color=green>可用</font>"; 
                 	  }
                  }},
              ]]
       
	});
		//查询
		function doSearch(){
			var params=$("#searchFrm").serialize();
			$("#table").datagrid({
				url:'${ctx}/user/loadAllUser.action?'+params
			});
		};
	//打开添加用户的弹出层
		var url="";
		$("#addUser").click(function(){
			$("#dlg").dialog("open").dialog('setTitle','添加用户');
			$("#fm").form("clear");//清空表格
			url="${ctx}/user/addUser.action";
			//添加鼠标离开时，自动添加用户名为用户拼音的事件
			$("#realname").textbox('textbox').bind('blur',function(){
				var val=$(this).val();
			
				$.post("${ctx}/user/getPinyinName.action",{realname:val},function(obj){
					//$("#loginname").textbox("setValue",obj);
					$("#fm").form("load",{
						loginname:obj,
						sex:1,
						available:1
					});
				});
			});
		});
		//打开修改的弹出层
		$("#updateUser").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$("#dlg").dialog("open").dialog('setTitle','修改用户');
				//表单数据装载
				$("#fm").form("load",row);
				url="${ctx}/user/updateUser.action";
				$("#realname").textbox('textbox').bind('blur', function(e){                    //汉字转拼音，bind鼠标离开事件
					var val=$(this).val();
					$.post("${ctx}/user/getPinyinName.action",{realname:val},function(obj){
						$("#loginname").textbox("setValue",obj);
					});
				});
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
		
		//保存
		function saveUser(){
			$.messager.progress();	// 显示进度条
			$('#fm').form('submit', {
				url: url,//数据提交地址  user/addUser.action
				onSubmit: function(){
					var isValid = $(this).form('validate');//对表单里面的required:true和vailType的数据进行验证
					if (!isValid){
						$.messager.progress('close');	// 如果验证失败关闭进度条
					}
					return isValid;	//返回验证结果
				},
				success: function(obj){//如果提交成功之后回调的方法
					$.messager.progress('close');	// 关闭进度条
                    var result = eval('('+obj+')');//把obj的josn字符串转成js认识的json对象
					$.messager.show({
						title:'提示',
						msg:result.msg
					});
					$("#table").datagrid("reload");//刷新数据表格
					$("#dlg").dialog("close");//关闭弹出层
				}
			});
		}
		
		
		//删除用户
		$("#deleteUser").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$.messager.confirm('提示','你确定要删除【'+row.realname+'】这个用户吗?',function(r){
                    if (r){
                        $.post('${ctx}/user/deleteUser.action',{userid:row.userid},function(result){
                                $.messager.show({    
                                    title: '提示',
                                    msg: '删除成功'
                                });
                                $("#table").datagrid("reload");//刷新表格
                        },'json');
                    }
                });
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
		
		
		//重置密码
		$("#resetUserPwd").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$.messager.confirm('提示','你确定要重置【'+row.realname+'】这个用户的密码吗?',function(r){
                    if (r){
                        $.post('${ctx}/user/resetUserPwd.action',{userid:row.userid},function(result){
                                $.messager.show({    
                                    title: '提示',
                                    msg: result.msg
                                });
                        },'json');
                        $("#table").datagrid("reload");//刷新数据表格 
                    }
                });
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
		
		
		
		//打开分配角色的指出层
		$("#selectUserRole").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$("#dlg-roles").dialog("open").dialog('setTitle','分配【'+row.realname+'】的角色');
				initRoleTable(row.userid);
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
		
		function initRoleTable(userid){
			$("#roletable").datagrid({
		        fitColumns:true,
		        rownumbers:true,
		        url:'${ctx}/user/loadUserRolesByUserId.action?userid='+userid,
		        columns:[[
		                  {field:'ck',checkbox:true},
		                  {field:'roleid',title:'角色编号',align:'center',width:100},
		                  {field:'rolename',title:'角色名称',align:'center',width:100},
		                  {field:'roledesc',title:'角色备注',align:'center',width:100}
		              ]],
	              onLoadSuccess: function (data) {
	                  if (data) {
	                	  for(var i=0;i<data.rows.length;i++){
	                		  var r=data.rows[i];
	                		  if (r.checked) {
	                              $('#roletable').datagrid('checkRow', i);
	                          }
	                	  }
	                      /* $.each(data.rows, function (index, item) {
	                          if (item.checked) {
	                              $('#roletable').datagrid('checkRow', index);
	                          }
	                      }); */
	                  }
	              }
			});
		}
		//保存用户和角色的关系
		function saveUserRole(){
			var row=$("#table").datagrid("getSelected");
			var userid=row.userid;
			var rows=$("#roletable").datagrid("getSelections");
			var params="userid="+userid;
			for(var i=0;i<rows.length;i++){
      		  var r=rows[i];
      		  params+="&ids="+r.roleid;
      	    }
			$.post("${ctx}/user/saveUserRoles.action?"+params,function(obj){
				$.messager.show({
					title:'提示',
					msg:obj.msg
				});
			});
		}
	</script>
  </body>
</html>
